<template>
  <div class="common-table">
    <el-table class="table" :data="tableData" height="620" stripe style="width: 100%" border>
      <!-- <el-table-column align="center" type="index" label=""> </el-table-column> -->
      <el-table-column show-overflow-tooltip align="center" v-for="item in tableLabel" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width">
        <!--  -->

        <template slot-scope="scope">
          <img v-if="item.prop === 'goodPic'" :src="scope.row.goodPic" alt="" style="width: 100px; height: 100px" />
          <el-tag v-if="item.prop === 'isPay' && scope.row.isPay === '-1'" type="danger">未付款</el-tag>
          <el-tag v-if="item.prop === 'isPay' && scope.row.isPay === '1'" type="success">已付款</el-tag>
          <el-tag v-if="item.prop === 'isPay' && scope.row.isPay === '0'" type="warning">待付款</el-tag>
          <span v-if="item.prop !== 'goodPic' && item.prop !== 'isPay'" style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="changePage" :current-page.sync="config.page" :page-sizes="[10, 20, 30, 50]" :page-size.sync="config.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="config.total"> </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'CommonTable',
  props: {
    tableData: Array,
    tableLabel: Array,
    config: Object
  },
  data() {
    return {}
  },
  methods: {
    //当前页数改变
    changePage(val) {
      this.$emit('changePage', val)
    },
    //每页显示页数改变
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    //修改用户信息
    handleEdit(row) {
      this.$emit('edit', row)
    },
    //删除用户信息
    handleDelete(row) {
      this.$emit('del', row)
    },
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>
<style lang="less">
.common-table {
  height: calc(100% - 62px);
  background-color: #fff;
  position: relative;

  .pager {
    position: absolute;
    bottom: 0;
    right: 20px;
  }
  .el-table thead {
    color: #666;
    font-weight: 700;
    font-size: 18px;
  }
  .el-button--primary {
    background-color: #6c88d5;
    color: #fff;
  }
  .el-pagination {
    margin-top: 20px;
  }
  .el-tag.el-tag--success {
    background-color: #00aa5a;
    color: #fff;
  }
  .el-tag.el-tag--danger {
    background-color: #fa4a1e;
    color: #fff;
  }
  .el-tag.el-tag--warning {
    background-color: #6c88d5;
    color: #fff;
  }
}
</style>

